<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<%@ taglib uri="http://www.springframework.org/tags" prefix="s"%>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>

<!DOCTYPE html>
<html lang="en">
<head>
<title><s:message code="app.title" /></title>
<%@ include file="Include.jsp"%>
<script type="text/javascript">
	
	$(document).ready(function() {
		var oTable = $('#contactTable').dataTable( {
			 	"bDestroy": true,
		        "bProcessing": false,
		        "iDisplayLength": 10,
		        "bFilter": false,
		        "bLengthChange": false,
		        "aoColumnDefs": [
		          { 'bSortable': false, 'aTargets': [0] }
		       	]
		 	} );
		
		$('#addContact').click(function(){
			$('#contactaddressListForm').attr('action','AddContact');
			$('#contactaddressListForm').attr('method','get');
			$('#contactaddressListForm').submit();
		});

		$("[data-toggle=modal]").click(function(ev) {
			ev.preventDefault();
			
			// load the url and show modal on success
			$( $(this).attr('data-target') ).load($(this).attr("href"), function() {
				$($(this).attr('data-target')).modal("show");
			});
			
		});
		
	});
	
	function edit(contactId){
		$('#contactaddressEditForm').attr('action','EditContact?contactId='+contactId);
		
		$('#contactId').val(contactId);
		
		$('#contactaddressEditForm').attr('method','get');
		$('#contactaddressEditForm').submit();
	}
	
	function manageAddress(contactId){
		$('#contactaddressEditForm').attr('action','ListContactaddress?contactId='+contactId);
		
		$('#contactId').val(contactId);
		
		$('#contactaddressEditForm').attr('method','get');
		$('#contactaddressEditForm').submit();
	}
	
</script>
</head>
<body>
	<div class="container">
		<%@ include file="Menu.jsp"%>
		<h2>Contact Addresses </h2>
		<hr>
		<form:form id="contactaddressEditForm" >
			<input type="hidden" id="contactId" name="contactId" />
		</form:form>
		<form:form id="contactaddressListForm" >
		<table class="table table-hover table-bordered" id="contactTable">
				<thead>
					<tr>
						<th>Contact Person</th>
						<th>Address</th>
						<th>City</th>
						<th>Cell No</th>
						<th>Tell No</th>
						<th><s:message code="app.action" /></th>
					</tr>
				</thead>
				
				<tbody>
					<c:forEach items="${contactaddressList}" var="contact" >
						<tr>
							<td>
								<c:out value="${contact.ctcperson}"></c:out>
							</td>
							<td>
								<c:out value="${contact.address}"></c:out>
							</td>
							<td>
								<c:out value="${contact.cityname}"></c:out>
							</td>
							<td>
								<c:out value="${contact.cellno}"></c:out>
							</td>
							<td>
								<c:out value="${contact.teleno}"></c:out>
							</td>
							<td>
								<a href="#" onclick="javascript: edit('${contact.contactaddressid}');" >Edit</a>
							</td>
						</tr>
					</c:forEach>
				</tbody>
		</table>
		<br>
		<br>
		<br>
		<a data-toggle="modal" href="AddContactAddress?contactId=${param.contactId}" data-target="#clientAddEditScreenHolder" class="btn" title="Add New Address">Add Address</a>
		</form:form>
		 <%@ include file="Footer.jsp"%>
	</div>
	<div id="clientAddEditScreenHolder" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	</div>
</body>
</html>